<template>
    <div class="itemMusicTop">
        <img :src="playlist.coverImgUrl" alt="" class="bgimg">
        <div class="itemLeft">
            <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
                <use xlink:href="#icon-zuojiantou"></use>
            </svg>
            <span>歌单</span>
        </div>
        <div class="itemRight">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-sousuo1"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-danlieliebiao"></use>
            </svg>
        </div>
    </div>





    <!-- 组件小照片 -->
    <div class="itemTopContent">
        <div class="contentLeft">
            <img :src="playlist.coverImgUrl" alt="">
            <div class="playCount">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bofang"></use>
                </svg>
                <span>{{ changeCount(playlist.playCount) }}</span>
            </div>
        </div>




        <div class="contentRight">
            <p class="rightP_one">{{ playlist.name }}</p>
            <div class="right_img">
                <img :src="playlist.creator.backgroundUrl" alt="" />
                <span>{{ playlist.creator.nickname }}</span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-youjiantou"></use>
                </svg>
            </div>
            <p class="rightP_two">
                <span>{{ playlist.description }}</span>
            </p>
        </div>
    </div>


    <div class="itemTopFooter">
        <div class="footerItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-pinglun"></use>
            </svg>
            <span>{{ playlist.commentCount }}</span>
        </div>
        <div class="footerItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-fenxiang"></use>
            </svg>
            <span>{{ playlist.shareCount }}</span>
        </div>
        <div class="footerItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xiazai"></use>
            </svg>
            <span>多选</span>
        </div>
        <div class="footerItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-a-duoxuankuanggou"></use>
            </svg>
            <span>多选</span>
        </div>
    </div>
</template>

<script>
// import { json } from 'body-parser';
// import { setDevtoolsHook } from 'vue';

export default {
    setup(props) {
        // console.log(props)
        //通过props进行传值,判断如果数据拿不到,就获取sessionStorage中的数据
        if ((props.playlist.creator = "")) {
            props.playlist.creator = JSON.parse(sessionStorage.getItem().playlist).creator
        }

        //播放量处理
        function changeCount(num) {
            if (num >= 100000000) {
                return (num / 100000000).toFixed(1) + '亿'
            } else if (num > 10000) {
                return (num / 10000).toFixed(1) + '万'
            }
        }
        return { changeCount }
    },
    props: ['playlist']
}


</script>

<style lang="less" scoped>
.itemMusicTop {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // margin: 0 .2rem;
    // padding: 0.2rem;
    position: relative;

    .itemRight,
    .itemLeft {
        width: 25%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 .2rem;

        span {
            font-size: .4rem;
            color: #fff;
        }

        .icon {
            fill: #fff;
        }
    }

    .bgimg {
        width: 100%;
        height: 8rem;
        position: fixed;
        z-index: -1;
        filter: blur(50px);
    }

}

.itemTopContent {
    display: flex;

    .contentLeft {
        position: relative;

        img {
            width: 3rem;
            height: 3rem;
            float: left;
            margin-top: .2rem;
            margin-left: .14rem;
            border-radius: .2rem;
        }

        .playCount {
            position: absolute;
            top: .3rem;
            left: 1.3rem;
            display: flex;
            justify-content: center;
            align-items: center;

            span {
                color: white;
            }
        }
    }

    .contentRight {

        .rightP_one {
            margin-top: .2rem;
            color: #fff;
            font-weight: 800;
            margin-left: .4rem;
            margin-right: .4rem;
            font-size: .2rem;
        }

        .right_img {
            // background-color: red;
            height: .8rem;
            width: 100%;
            margin-top: .2rem;

            img {
                width: .8rem;
                height: .8rem;
                border-radius: 50%;
                margin-left: .4rem;
                float: left;
            }

            span {
                margin-left: .3rem;
                text-align: center;
                float: left;
                line-height: .8rem;
                color: rgb(184, 179, 184);
            }

            .icon {
                margin-top: .12rem;
                width: .25rem;
            }


        }

        .rightP_two {
            font-size: .25rem;
            margin-top: .2rem;
            margin-left: .4rem;
            margin-right: .4rem;
            color: rgb(184, 179, 184);

            span{
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
        }

    }


}

.itemTopFooter {

    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: .3rem;
    height: 1.2rem;

    .footerItem {
        display: flex;
        flex-direction: column;
        justify-content:space-around;
        align-items: center;
        height: 100%;
        color: white;
        font-weight: 800;
        font-size: .35rem;

        .icon{
            width: 1.2rem;
        }
    }
}
</style>